<template>
  <div class="ateam">
		<!-- 整体内容居中 -->
		<div class="a_inner">
			<!-- 头部文字介绍 -->
			<div class="a_inner_top">
				<div class="a_inner_top_title width183">
					<h1 v-text="lang.h1Text"></h1>
				</div>
				<h3 v-text="lang.h3Text"></h3>
			</div>
			<!-- 图片内容区域 -->
			<div class="ateam_content">
				<div  
					class="leader_layer"
					v-for="(items, indexs) in leaderLayerList"
					:key="items.enText"
				>
					<!-- 标签 -->
					<h5 v-if="items.isLabel" v-text="lang.leaderLayerList[indexs].isLabel"></h5>
					<!-- 人物介绍 -->
					<div 
						v-for="(item, index) in items.leaderList"
						:key="index"
						class="leader_layer_item" 
						:class="[item.class]"
					>
						<div class="leader_item_img"><img :src="item.imgUrl" alt="item.enText"></div>
						<h6 v-text="lang.leaderLayerList[indexs].leaderList[index].enText"></h6>
						<p v-text="lang.leaderLayerList[indexs].leaderList[index].localText"></p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

export default {
	props: {
		lang: {
			type: Object,
		},
	},
  data () {
    return {
		
			leaderLayerList: [
				{
					isLabel: 'core',
					leaderList: [
						{ imgUrl: require("../images/team/1.png"), class: 'big_leader', },
						{ imgUrl: require("../images/team/2.png"), class: 'big_leader', },
						{ imgUrl: require("../images/team/3.png"), class: 'big_leader no_mar', },
					]
				},
				{
					isLabel: '',
					leaderList: [
						{ imgUrl: require("../images/team/4.png"), class: 'mid_leader',},
						{ imgUrl: require("../images/team/5.png"), class: 'mid_leader',},
						{ imgUrl: require("../images/team/6.png"), class: 'mid_leader',},
						{ imgUrl: require("../images/team/7.png"), class: 'mid_leader no_mar',},

						{ imgUrl: require("../images/team/8.png"), class: 'mid_leader',},
						{ imgUrl: require("../images/team/9.png"), class: 'mid_leader',},
						{ imgUrl: require("../images/team/10.png"), class: 'mid_leader',},
						{ imgUrl: require("../images/team/11.png"), class: 'mid_leader no_mar',},

						{ imgUrl: require("../images/team/12.png"), class: 'mid_leader margin_left_167',},
						{ imgUrl: require("../images/team/13.png"), class: 'mid_leader',},
						{ imgUrl: require("../images/team/14.png"), class: 'mid_leader',},
					]
				},
				{
					isLabel: '顾问',
					leaderList: [
						{ imgUrl: require("../images/team/15.png"), class: 'adv_leader', },
						{ imgUrl: require("../images/team/16.png"), class: 'adv_leader', },
						{ imgUrl: require("../images/team/17.png"), class: 'adv_leader', },
						{ imgUrl: require("../images/team/18.png"), class: 'adv_leader',},
						{ imgUrl: require("../images/team/19.png"), class: 'adv_leader no_mar',},
					]
				},
			]

    }
  },
  methods: {

  },
  mounted () {

  }
}
</script>

<style lang="less">
.ateam{
	padding-bottom: 100px;
	// background: url(../images/bg6.png) no-repeat center top;
	// background-size: auto 1010px;
	background-size: cover;
	.a_inner{
		margin-bottom: 50px;
		.a_inner_top_title{
			&.width183{
				width: 183px;
				margin-bottom: 40px;
			}	
		}
		.ateam_content{
			overflow: hidden;
			padding-top: 50px;
			h5{
				position: relative;
				line-height: 29px;
				font-size: 20px;
				width: 80px;
				margin: 0 auto 50px;
				color: #E9ECF3;
				&::after{
					content: '';
					position: absolute;
					right: -140px;
					top: 14px;
					width: 100px;
					height: 2px;
					background:  rgba(50,104,240,0.29);
					border-radius: 4px;
				}
				&::before{
					content: '';
					position: absolute;
					left: -140px;
					top: 14px;
					width: 100px;
					height: 2px;
					background:  rgba(50,104,240,0.29);
					border-radius: 4px;
				}
			}
			.leader_layer{
				overflow: hidden;
				.leader_layer_item{
					float: left;
					margin-bottom: 50px;
					text-align: center;
					.leader_item_img{
						margin-bottom: 30px;
						color: #E9ECF3;
						font-size: 0;
						img{
							width: 100%;
						}
					}
					h6{
						margin-bottom: 6px;
						line-height: 27px;
						font-size: 18px;
						color: #E9ECF3;
					}
					p{
						margin-bottom: 6px;
						line-height: 24px;
						font-size: 16px;
						color: #E9ECF3;
					}
				}
				.big_leader{
					width: 260px;
					margin-right: 210px;
				}
				.mid_leader{
					width: 200px;
					margin-right: 133px;
				}
				.adv_leader{
					width: 200px;
					margin-right: 50px;
				}
				.no_mar{
					margin-right: 0px;
				}
				.margin_left_167{
					margin-left: 167px;       
				}
			}	
		}
	}
}
</style>
